<template>
  <div>
  <v-pulldown
    :rotate="scrollTop"
    :pulldownStatus="pulldownStatus.pulldownStatus"
    ></v-pulldown>
  <scroller
    usePulldown
    lock-x
    :lock-y="lockY"
    @on-scroll="scroll"
    v-model="pulldownStatus"
    @on-pulldown-loading="reloadData"
    :pulldownConfig="$config.pullDownConfig"
    :height="height"
    ref="scrollBar">
    <slot></slot>
  </scroller>
  </div>
</template>

<script>
import { Scroller } from 'vux'

export default {
  name: 'scroll',
  components: {
    Scroller
  },
  props: {
    height: {
      type: String,
      default: '-1px'
    },
    lockY: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      scrollTop: 0,
      pulldownStatus: {
        pulldownStatus: 'default',
        pullupStatus: 'default'
      }
    }
  },
  methods: {
    scroll (scrollTop) {
      this.scrollTop = scrollTop.top
    },
    reloadData () {
      if (this.setScrollBarStateDefault === null) {
        this.setScrollBarStateDefault = setTimeout(() => {
          this.pulldownStatus.pulldownStatus = 'default'
          this.setScrollBarStateDefault = null
          this.$emit('reload')
        }, 1000)
        return
      }
      clearTimeout(this.setScrollBarStateDefault)
      this.setScrollBarStateDefault = setTimeout(() => {
        this.pulldownStatus.pulldownStatus = 'default'
        this.setScrollBarStateDefault = null
        this.$emit('reload')
      }, 1000)
    },
  },
  created () {

  }
}
</script>

<style scoped lang="less">

</style>